<template>
  <div>
    <!--     <search-bar></search-bar>-->
    <TopBar></TopBar>
    <div style="margin-bottom: 20px"></div>
    <div class="flex justify-center">
      <div class="col-8 justify-center">
        <!--        <el-skeleton :rows="6" animated />-->
        <el-collapse-transition>
          <Diagnosis v-if="!state"></Diagnosis>
          <DrugSearch v-else style="margin-bottom: 65px"></DrugSearch>
        </el-collapse-transition>
      </div>
    </div>
    <Footer style="margin-top: 20px;"></Footer>
  </div>
</template>

<script>
import Diagnosis from "@/pages/Intelligent_diagnosis/Diagnosis";
import Footer from "@/components/Footer";
import TopBar from "@/components/TopBar";
import DrugSearch from "@/pages/Drug_Search/components/DrugSearch";

export default {
  name: "MainPage",
  components: {
    Diagnosis,
    Footer,
    TopBar,
    DrugSearch
  },
  data() {
    return {
      state: true
    }
  },
  created() {
    this.$root.$on("changestate", value => {
      console.log("value:" + value)
      this.state = value === 1;
    });
  }
}
</script>

<style scoped>

</style>
